<template>
    <div class="charge-system">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期">
                    <el-date-picker
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="是否税后">
                    <el-switch v-model="form.isAfterTax"> </el-switch>
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 12px"
                        @click="submitHandle()"
                        >查询</el-button
                    >
                </el-form-item>
                <el-form-item class="daochu">
                    <el-button size="small" type="orange" @click="exportExcel()"
                        >导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="plExportExcel()"
                        >批量导出</el-button
                    >
                </el-form-item>
            </el-form>
            <p class="g-unit">单位: 万元</p>
            <div class="tableBox">
                <el-table
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width:100%"
                    class="tableTh28"
                    height="73vh"
                    :span-method="arraySpanMethod"
                    ref="table"
                >
                    <el-table-column
                        fixed
                        prop="dataSource"
                        label="收入来源"
                        width="80px"
                    ></el-table-column>
                    <el-table-column
                        fixed
                        prop="class1"
                        label="收入项"
                        width="80px"
                    ></el-table-column>
                    <el-table-column
                        fixed
                        prop="class2"
                        label="收入面"
                        width="100px"
                    ></el-table-column>
                    <el-table-column
                        fixed
                        prop="indexName"
                        label="产品项"
                        width="100px"
                    >
                    </el-table-column>
                    <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
                    <el-table-column
                        show-overflow-tooltip
                        class-name="right-money"
                        v-for="(item, index) in colList"
                        :key="index"
                        :label="item.colnumName"
                    >
                        <el-table-column
                            :prop="'data' + index"
                            :label="item.data"
                            width="90px"
                        ></el-table-column>
                        <el-table-column
                            :prop="index + 'increase'"
                            :label="item.increase"
                            width="90px"
                        ></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import prefixAPI from "@/api/prefixAPI";


export default {
    name: 'Bill-tab1',
    data() {
        return {
            titleName: [],
            tableLoading: false,
            form: {
                areaId: "",
                month: "",
                isAfterTax: true
            },
            tableData: [],
            colList: [],
            colnumName: []
        };
    },
    created() {
        
    },
    methods: {
        init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;
            // this.submitHandle();
            this.getMaxAcctMonthByDailyAccount();
        },
        submitHandle() {
            let areaId = this.form.areaId;
            let accMonth = this.form.month;
            let isAfterTax = this.form.isAfterTax;
            this.tableLoading = true;
            $budgetAPI.dailyAccountGetList2(
                {
                    areaId,
                    accMonth,
                    isAfterTax
                },
                res => {
                    this.tableLoading = false;
                    if (res.code == 0) {
                        res.content.dataList.map((item, index) => {
                            for (let i = 0; i < 31; i++) {
                                item["data" + i] = item.data[2 * i];
                                item[i + "increase"] = item.data[2 * i + 1];
                            }
                        });
                        console.log(res);
                        this.colList = res.content.colList;
                        // let result = this.createTableData(res.content.dataList);
                        this.tableData = res.content.dataList;
                        console.log(this.tableData);
                        // this.spanArr = createSpanCharge(result,['incomeName','projectName','isProjectName','productName']);
                        this.spanArr = mergeSpan(this.tableData, [
                            "dataSource",
                            "class1",
                            "class2",
                            "indexName"
                        ]);
                        console.log(this.spanArr);
                        console.log("mergeSpan", temp);

                        setTimeout(() => {
                            this.$refs.table.doLayout();
                        }, 1200);
                    }
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        // 生成tableData数据
        createTableData(dataArr) {
            let result = dataArr.map((item, index) => {
                return { ...item, ...item.data };
            });
            return result;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                columnIndex == 0 ||
                columnIndex == 1 ||
                columnIndex == 2 ||
                columnIndex == 3
            ) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        exportExcel() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let accMonth = this.form.month
                ? this.form.month
                : this.accountInfo.month;
            let isAfterTax = this.form.isAfterTax;
            let token = getCookie("token");
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/dailySecondAccount/export?areaId=" +
                    areaId +
                    "&accMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    "&token=" +
                    token;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/dailySecondAccount/export?areaId=" +
                    areaId +
                    "&accMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    "&token=" +
                    token;
            }
        },
        plExportExcel() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let isAfterTax = this.form.isAfterTax;
            let accMonth = this.form.month
                ? this.form.month
                : this.accountInfo.month;
            let token = getCookie("token");
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/dailySecondAccount/exportBatch?areaId=" +
                    areaId +
                    "&accMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    "&token=" +
                    token;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/dailySecondAccount/exportBatch?areaId=" +
                    areaId +
                    "&accMonth=" +
                    accMonth +
                    "&isAfterTax=" +
                    isAfterTax +
                    "&token=" +
                    token;
            }
        },
        getMaxAcctMonthByDailyAccount() {
            let areaId = this.form.areaId;
            $budgetAPI.getMaxAcctMonthByDailyAccount2(
                {
                    areaId
                },
                res => {
                    if (res && res.code == 0) {
                        this.form.month = res.content;
                        this.submitHandle();
                    }
                },
                err => {}
            );
        },
    }
};
</script>

<style lang="scss">
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
        }
    }
}
</style>
